<template>
    <div class="cinema_body">
        <ul>
            <li>
                <div>
                    <span>大地影院（贵阳点）</span>
                    <span class="q"><span class="price">22.9</span></span>
                </div>
                <div class="address">
                    <span>观山湖世纪城a区 121号19层</span>
                    <span>1231.2km</span>
                </div>
                <div class="card">
                    <div>小吃</div>
                    <div>折扣卡</div>
                </div>
            </li>
            <li>
                <div>
                    <span>大地影院（贵阳点）</span>
                    <span class="q"><span class="price">22.9</span></span>
                </div>
                <div class="address">
                    <span>观山湖世纪城a区 121号19层</span>
                    <span>1231.2km</span>
                </div>
                <div class="card">
                    <div>小吃</div>
                    <div>折扣卡</div>
                </div>
            </li>
            <li>
                <div>
                    <span>大地影院（贵阳点）</span>
                    <span class="q"><span class="price">22.9</span></span>
                </div>
                <div class="address">
                    <span>观山湖世纪城a区 121号19层</span>
                    <span>1231.2km</span>
                </div>
                <div class="card">
                    <div>小吃</div>
                    <div>折扣卡</div>
                </div>
            </li>
            <li>
                <div>
                    <span>大地影院（贵阳点）</span>
                    <span class="q"><span class="price">22.9</span></span>
                </div>
                <div class="address">
                    <span>观山湖世纪城a区 121号19层</span>
                    <span>1231.2km</span>
                </div>
                <div class="card">
                    <div>小吃</div>
                    <div>折扣卡</div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name:'Clist'
}
</script>

<style scoped>
    #content .cinema_body{
        flex: 1;
        overflow: auto;
    }
    .cinema_body ul{
        padding: 0 20px 0;
        
    }
    .cinema_body ul li{
        border-bottom: 1px solid #e6e6e6;
        margin-bottom: 20px;
    }
    .cinema_body ul li > div{
        margin: 8px 0;
    }
    cinema_body div{
        margin-bottom: 10px;
    }
    .cinema_body .q{
        font-size: 11px;
        color: #f03d37;
    }
    .cinema_body .price{
        font-size: 18px;
    }
    .cinema_body .address{
        font-size: 13px;
        color: #666;
    }
    .cinema_body .address span:nth-of-type(2){
        float: right;
    }
    .cinema_body .card{
        display: flex;
    }
    .cinema_body .card div{
        padding: 3px 5px;
        height: 15px;
        line-height: 15px;
        border-radius: 2px;
        color: #f90;
        border: 1px solid #f90;
        margin-right: 10px;
    }
    .cinema_body .card div.or{
        color: #f90;
        border: 1px solid #f90;
    }
    .cinema_body .card div.bl{
        color: #589daf;
        border: 1px solid #f90;
    }
</style>
